<template>
  <div >
    <page-scroll :footer="false" >
      <template #header>
        <gltitle
            :title="$t('lucky.doc10')"
            :is_name="true"
            :is_back="true"
            :is_lang="false"
            :is_kf="false"
            :is_right="false"
        ></gltitle>
      </template>
      <template #content>
        <div class="lucky">
          <div class="container">
            <div class="prize-name">
              <div class="text">{{ $t("lucky.doc15") }}</div>
            </div>
          </div>
          <div class="prize-con">
            <img :src="luckyInfo?.imgUrl"/>
          </div>

          <div class="text-box">
            <div class="name">{{ luckyInfo?.name }}</div>
            <!--          <div class="text">进行“团队收益”时，可使用加速包获取更多收益</div>-->
          </div>


          <div class="link">
             <Btn :isOn="true"
                  :btnText="$t('lucky.doc33')"
                  @clickBtn="handleAncoraClick"
             />
             <Btn :isOn="true"
                  :btnText="$t('lucky.doc14')"
                  @clickBtn="$router.replace('/lucky/record')"
                  class="empty-bnt"
             />
            <!--type 0-谢谢参与，1-金额，2-实物 |-->
<!--            <Btn :isOn="true"-->
<!--                 v-if="luckyInfo?.type==2"-->
<!--                 :btnText="$t('page.doc230')"-->
<!--                 @clickBtn="$router.replace('/customer')"-->
<!--                 class="big"-->
<!--            />-->
          </div>
        </div>
      </template>
    </page-scroll>
  </div>
</template>

<script>

import Btn from "@/components/public/Btn.vue";
import {Dialog} from "vant";
import LuckyRecordPop from "@/views/lucky/components/LuckyRecordPop.vue";

export default {
  components: { Btn,},
  data() {
    return {
      showRecord:false
    }
  },
  computed: {
    luckyInfo() {
      return this.$store?.state.luckyInfo || {}
    }
  },
  methods: {
    async handleAncoraClick() {
      if (!this.luckyInfo.hasOwnProperty('remainingCount')||this.luckyInfo.remainingCount  < 1) {
        Dialog.alert({
          message: this.$t("lucky.doc7"),
          showCancelButton: true,
          cancelButtonText: this.$t("page4.doc63"),
          confirmButtonText: this.$t("page.doc98"),
        }).then(() => {
          this.$router.replace("/my/invite");
        })
        return;
      }
      const res =   await this.$post(this.URL.lucky.create)
      if(res.code!=0)return this.$toast(res.message)
      this.$store.commit("SET_LUCKY_INFO", res.data);
      this.$router.replace('/lucky/go')
    },

  }
}
</script>

<style lang="less" scoped>
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

/deep/ .page {
  background: #120801 url('../../assets/images/lucky/go-bg.png') no-repeat 0 -3.4rem !important;
  background-size: 100% 17rem !important;
}


.prize-con {
  background: url("../../assets/images/lucky/glow_bg.png");
  width: 100%;
  height: 5rem;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadenum 2s ease-out forwards;

  img {
    width: 1.8rem;
    /* 动画持续时间为6秒，并在动画结束后保持最终状态 */
  }

  @keyframes fadenum {
    from {
      transform: scale(0.4); /* 初始状态，将元素缩小10倍 */
    }
    to {
      transform: scale(1); /* 终止状态，将元素放大35倍 */
    }
  }
}

/deep/ .head {
  background: transparent !important;

  .name {
    color: #fff !important;
  }
}

.prize-name {
  display: flex;
  flex-direction: column;
  align-items: center;

  .text {
    font-style: normal;
    font-weight: 600;
    font-size: 0.48rem;
    line-height: 1em;
    text-align: center;
    background: linear-gradient(106deg, #7B02FE -3.97%, #0570FD 86.54%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 0.2rem;
  }

}

.text-box {
  padding: 0 .4rem;
  text-align: center;

  .name {
    width: 100%;
    margin-top: 0.4rem;
    margin-bottom: 0.12rem;
    font-size: 0.36rem;
    color: #fff;
    line-height: 1.1;
    font-weight: 700;
  }

  .text {
    color: #FFF;

    font-size: .28rem;
  }
}


.link {
  margin-top: 1.2rem;
  padding: 0 .32rem;

}
</style>